<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>第５週ミニ課題</title>
  <link rel="stylesheet" href="css/default.css">
  <!-- 必要に応じてCSSを定義する．-->
  <style>
    /* ここから */
    div.omikuji {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 1px solid black;
      width: 40%;
      margin: 1rem auto 1rem;
    }
    div.omikuji>span:first-child {
      width: 100%;
      text-align: center;
      background-color: green;
      color: hsl(226, 100%, 100%);
      font-weight: bolder;
    }
    div.omikuji>span:last-child{
      font-size: 20px;
      color:black;
    }

    /* ここまで */
  </style>
</head>
<body>
  <div class="container">
    <!-- 各自の学生証番号と氏名で置き換えること -->
    <div class="namebox">26001904662<br>YAN YIPEI</div>

    <h1>第５週ミニ課題</h1>
    <p>レジュメに従ってReactコンポーネントを実装せよ．</p>
    <p>なお，JavaScriptプログラムは，
      <code>js/week05.jsx</code>
      として定義せよ．</p>
    <hr class="answer">
    <!-- React component を配置する．-->
    <div id="root"></div>
  </div>
  <!-- JavaScript の定義 -->
  <script src="js/week05.jsx"></script>
</body>
</html>
